import React,{ Component,Fragment } from 'react';
import {
	StyleSheet,
	View,
	Text,
	TouchableOpacity,
	TextInput,
	Button,
	Image,
	ScrollView
} from 'react-native';
import RadioModal from 'react-native-radio-master';
import SelectPicker from '../../common/SelectPicker';
import DatePicker from 'react-native-datepicker';
import { HeaderDatepicker } from '../../common';
import Toast, {DURATION} from 'react-native-easy-toast';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import Axios from '../../axios';
import NavigationService from '../../common/NavigationService';
class HeaderLeft extends Component{
	render(){
		return (<TouchableOpacity
				onPress={()=>this.props.goBack()}
			>
			<Image
				style={styles.topLeftImg}
				source={require('../../assets/images/back_icon.png')}
			/>
		</TouchableOpacity>)
	}
}
export default class CreateActivity extends Component{
	constructor(props) {
	  super(props);
	  console.log(this.props.navigation.state.params.showRoleData)
	  var date = new Date();
	  var year=date.getFullYear(); 
	  var month=date.getMonth()+1;
	  var day=date.getDate();
	  month =(month<10 ? "0"+month:month); 
	  day =(day<10 ? "0"+day:day); 
	  var today = (year.toString()+'-'+month.toString()+'-'+day.toString());
	  this.state = {
		initRole:this.props.navigation.state.params.initRole,
		showRoleData:this.props.navigation.state.params.showRoleData,
		channelPushUserCnt: this.props.navigation.state.params.allCount,
		pushChannelId: '2',
		groupId: this.props.navigation.state.params.policyId.value,
		hsContent: this.props.navigation.state.params.msgContent,
		acctMonth: year.toString()+'-'+month.toString(),
		activityName: '',
		activityType: '01',//权限
		activityStartTime: today,
		activityEndTime: today,
		activityDesc: '',
		dayPushCnt: '',
		priority: '3',
		dayPushTime: '8-20',
		activityOverTime: today,
		policyId: this.props.navigation.state.params.policyId.value,
		mktType: 'PERIODIC',
		isFtp: this.props.navigation.state.params.selectIsFtp,
		ftpOperationname: this.props.navigation.state.params.ftpOperationname,
		prouctSelectData: this.props.navigation.state.params.selectProductList
	}
	}
	static navigationOptions = ({navigation,navigationOptions})=>{
		const name = navigation.getParam("name");
		const policyId = navigation.getParam("policyId");
		const policyType = navigation.getParam("policyType");
		const productIds = navigation.getParam("productIds");
		const allCount = navigation.getParam("allCount");
		const productList = navigation.getParam("productList");
		const phone = navigation.getParam("phone");
		const msgContent = navigation.getParam("msgContent");
		const selectIsFtp = navigation.getParam("selectIsFtp");
		return {
			title:name,
			headerLeft:<HeaderLeft goBack={()=>navigation.navigate("NetMaintainFinalStep")}/>,
			headerStyle:{
				...navigationOptions.headerStyle,
				backgroundColor:"#f54545"
			},
			headerTitleStyle:{
				fontSize:18,
				flex:1,
				textAlign:'center'
			},
			headerRight:<View></View>
		}
	}
	
	createActivity = ()=>{
		if(this.state.showRoleData.length== 0){
			this.refs.toast.show('暂无创建权限',3);
			return false;
		}
		if(this.state.activityName==''){
			this.refs.toast.show('请填写活动名称',3);
			return false;
		}
		if(this.state.activityName.length>200){
			this.refs.toast.show('名称长度超过200',3);
			return false;
		}
		
		if(this.state.isFtp=='0'){
			var activityStartTime = new Date(this.state.activityStartTime);
		    var activityEndTime = new Date(this.state.activityEndTime);
		    var activityOverTime = new Date(this.state.activityOverTime);
			//console.log(this.state.activityStartTime+'  '+this.state.activityEndTime+'  '+this.state.activityOverTime);
		    //console.log(activityStartTime.getTime()+'  '+activityEndTime.getTime()+'  '+activityOverTime.getTime());
		    if(activityEndTime.getTime() < activityStartTime.getTime()){
		        this.refs.toast.show('推送结束小于推送开始',3);
				return false;
		    }
		    if(activityOverTime.getTime() <= activityEndTime.getTime()){
		        this.refs.toast.show('活动结束小于等于推送结束',3);
				return false;
		    }
		    if(this.state.dayPushCnt==''){
				this.refs.toast.show('请填写天发送总量',3);
				return false;
			}
		}
		if(this.state.activityDesc.length>500){
			this.refs.toast.show('描述长度超过500',3);
			return false;
		}
		let _this = this;
		Axios.ajax({
			url:'/mkt/submitAndApprove',
			data:{
				'channelPushUserCnt': this.state.channelPushUserCnt,
				'pushChannelId': this.state.pushChannelId,
				'groupId': this.state.groupId,
				'hsContent': this.state.hsContent,
				'acctMonth': this.state.acctMonth.replace('-',''),
				'activityName': this.state.activityName,
				'activityType': this.state.activityType,
				'startTime': this.state.activityStartTime,
				'endTime': this.state.activityEndTime,
				'activityDesc': this.state.activityDesc,
				'dayPushCnt': this.state.dayPushCnt,
				'priority': this.state.priority,
				'dayPushTime': this.state.dayPushTime,
				'activityOverTime': this.state.activityOverTime,
				'policyId': this.state.policyId,
				'mktType': this.state.mktType,
				'isFtp': this.state.isFtp,
				'ftpOperationname':this.state.ftpOperationname,
				'prouctSelectData': this.state.prouctSelectData
			}
		}).then((res)=>{
			if(res.data=='设置成功'){
				_this.refs.toast.show('创建活动成功',3);
				NavigationService.navigate("TrackIndex");
			}else{
				_this.refs.toast.show(res,3)
			}
		})
	}
	componentDidMount() {
		
	}

	isShow(){
		if(this.props.navigation.state.params.selectIsFtp=='1'){
			return null
		}else{
			return (
				<Fragment>
					<View style={styles.formGroup}>
						<Text style={styles.label}>推送开始日期:</Text>
						<TouchableOpacity>
							<DatePicker
						        date= {this.state.activityStartTime}
						        mode='date'
						        format='YYYY-MM-DD'
						        minDate={'2018-01-01'}
						        maxDate={'2030-12-31'}
						        confirmBtnText="确定"
						        cancelBtnText="取消"
						        locale="zh-Hans"
						        iconSource={null}
						        style={{width:240}}
						        customStyles={{
									dateIcon: {
										display:'none'
									},
									dateInput: {
										borderWidth:1,
										borderColor:'#ccc',
										borderRadius:4
									},
									dateText:{
										color:'#757575',
										fontSize:14
									},
									btnTextConfirm:{
										color:"#f54545"
									}
						            // ... You can check the source to find the other keys.
						        }}
						        onDateChange={(date) => {
						        	this.setState({activityStartTime: date});
						        }}
					        />
						</TouchableOpacity>
					</View>
					<View style={styles.formGroup}>
						<Text style={styles.label}>推送结束日期:</Text>
						<TouchableOpacity>
							<DatePicker
						        date= {this.state.activityEndTime}
						        mode='date'
						        format='YYYY-MM-DD'
						        minDate={'2018-01-01'}
						        maxDate={'2030-12-31'}
						        confirmBtnText="确定"
						        cancelBtnText="取消"
						        locale="zh-Hans"
						        iconSource={null}
						        style={{width:240}}
						        customStyles={{
									dateIcon: {
										display:'none'
									},
									dateInput: {
										borderWidth:1,
										borderColor:'#ccc',
										borderRadius:4
									},
									dateText:{
										color:'#757575',
										fontSize:14
									},
									btnTextConfirm:{
										color:"#f54545"
									}
						            // ... You can check the source to find the other keys.
						        }}
						        onDateChange={(date) => {
						        	this.setState({activityEndTime: date});
						        }}
					        />
						</TouchableOpacity>
					</View>
					<View style={styles.formGroup}>
						<Text style={styles.label}>活动结束日期:</Text>
						<TouchableOpacity>
							<DatePicker
						        date= {this.state.activityOverTime}
						        mode='date'
						        format='YYYY-MM-DD'
						        minDate={'2018-01-01'}
						        maxDate={'2030-12-31'}
						        confirmBtnText="确定"
						        cancelBtnText="取消"
						        locale="zh-Hans"
						        iconSource={null}
						        style={{width:240}}
						        customStyles={{
									dateIcon: {
										display:'none'
									},
									dateInput: {
										borderWidth:1,
										borderColor:'#ccc',
										borderRadius:4
									},
									dateText:{
										color:'#757575',
										fontSize:14
									},
									btnTextConfirm:{
										color:"#f54545"
									}
						            // ... You can check the source to find the other keys.
						        }}
						        onDateChange={(date) => {
						        	this.setState({activityOverTime: date});
						        }}
					        />
						</TouchableOpacity>
					</View>
					<View style={styles.formGroup}>
						<Text style={styles.label}>天发送总量:</Text>
						<TextInput 
							underlineColorAndroid={'transparent'}//去掉下划线
							style={styles.formContrl}
							keyboardType="numeric"
							value={this.state.dayPushCnt}
							onChangeText={(text) => {
								var regu = /^[1-9]\d*$/;
							    if (!regu.test(text)) {
									 this.setState({dayPushCnt:''});
								}else{
								     this.setState({dayPushCnt:text});
							    }
							}}
						/>
					</View>
				</Fragment>
			)
		}
	}

	render(){
		 var  dates = [];
		 for(let i=0;i<12;i++){
		    var date1 = new Date();
			date1.setMonth(date1.getMonth()+i);
			var year1=date1.getFullYear(); 
			var month1=date1.getMonth()+1;
			month1 =(month1<10 ? "0"+month1:month1); 
			var sDate = (year1.toString()+'-'+month1.toString());
		    dates.push(sDate);
		 }
		return (
		   <ScrollView keyboardShouldPersistTaps={true} style={styles.container}>
				<KeyboardAwareScrollView
				  keyboardShouldPersistTaps={true}
			      resetScrollToCoords={{ x: 0, y: 0 }}
			      contentContainerStyle={styles.container}
			      scrollEnabled={false}
			    >
				<View style={styles.formGroup}>
					<Text style={styles.label}>活动名称:</Text>
					<TextInput 
						underlineColorAndroid={'transparent'}//去掉下划线
						style={styles.formContrl}
						onChangeText={(text) => {this.setState({activityName:text})}}
					/>
				</View>
				<View style={styles.formGroup}>
					<Text underlineColorAndroid={'transparent'} style={styles.label}>审批部门:</Text>
					<SelectPicker 
						value={this.props.navigation.state.params.showRoleData}
						onValueChange={(value)=>{
							this.setState({activityType:this.props.navigation.state.params.mapObj.get(value)})
						}}
					/>
				</View>
				<View style={styles.formGroup}>
					<Text style={styles.label}>优先级:</Text>
					<RadioModal
		                selectedValue={'3'}
		                onValueChange={(id,item) => this.setState({priority:id})}
		                style={{ width:240,justifyContent:'flex-start',flexDirection:'row',flexWrap:'wrap' }} 
		                innerStyle={{width:65}}
	                >
	                  <Text  value="3">高</Text>
	                  <Text  value="2">中</Text>
	                  <Text  value="1">低</Text>
	                </RadioModal>
				</View>
				<View style={styles.formGroup}>
					<Text underlineColorAndroid={'transparent'} style={styles.label}>活动账期:</Text>
					<SelectPicker 
						value={dates}
						onValueChange={(value)=>{
							this.setState({acctMonth:value})
						}}
					/>
				</View>
				
				{this.isShow()}
				<View style={styles.formGroup}>
					<Text underlineColorAndroid={'transparent'} style={styles.label}>活动描述:</Text>
					<TextInput 
						style={[styles.formContrl,styles.textArea]}
						onChangeText={(text) => {this.state.activityDesc = text}}
					/>
				</View>
				<View>
					<View style={styles.submitWrap}>
						<TouchableOpacity
							onPress={()=>{this.createActivity()}}
						>
							<View style={styles.submitBtn}><Text style={styles.submitBtnTxt}>创建活动</Text></View>
						</TouchableOpacity>
					</View>
				</View>
				</KeyboardAwareScrollView>
				<Toast 
					ref="toast"  
					position="bottom"
					positionValue={460}
					fadeInDuration={750}
                    fadeOutDuration={1000}
                    opacity={0.8}
				/>
			</ScrollView>
		)
	}
}

const styles=StyleSheet.create({
	topLeftImg:{
		width:22,
		height:22,
		marginLeft:10
	},
	submitWrap:{
		justifyContent:'center',
		alignItems:'center',
		marginTop:20
	},
	submitBtnTxt:{
		color:'#fff',
		fontSize:18
	},
	submitBtn:{
		color:'#fff',
		backgroundColor:'#f54545',
		height:40,
		paddingLeft:40,
		paddingRight:40,
		lineHeight:40,
		borderRadius:4,
		justifyContent:'center',
		alignItems:'center'
	},
	container:{
		flex:1,
		backgroundColor:'#fff',
		paddingTop:10,
		paddingBottom:20
	},
	formGroup:{
		width:'100%',
		flexDirection:'row',
		justifyContent:'center',
		alignItems:'center',
		marginBottom:10,
		backgroundColor:'#fff'
	},
	label:{
		width:80,
		fontSize:16,
		color:'#757575',
		textAlign:'left'
	},
	formContrl:{
		borderWidth:1,
		borderColor:"#ccc",
		width:240,
		height:40,
		borderRadius:4,
		paddingLeft:5,
		paddingRight:5,
		backgroundColor:"#fff"
	},
	textArea:{
		height:100,
	}
})